<template>
  <div class="box hide-scroller-bar">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); background: #ffff"
      title="招商中心装修"
      @back="() => $router.back()"
    />
    <a-row class="content-box hide-scroller-bar">
      <a-col class="left">
        <div>
          <a-tabs type="card" v-model:activeKey="radio" :tabBarGutter="5">
            <a-tab-pane
              v-for="item in radioList"
              :key="item.value"
              :tab="item.name"
            />
          </a-tabs>
          <a-collapse
            v-model:activeKey="activeKey"
            :expand-icon-position="'right'"
            accordion
            style="width: 99%"
          >
            <a-collapse-panel
              v-for="(item, index) in collapseList"
              :key="index"
              :header="item.name"
            >
              <!--主图 -->
              <a-row
                align="middle"
                v-if="
                  item.alias == 'MainDrawing' ||
                  item.alias == 'PromotionArea2' ||
                  item.alias == 'Entrusted' ||
                  item.alias == 'MainDrawingMobile'
                "
              >
                <a-col>
                  <a-upload
                    :action="$utils.imgAction"
                    :headers="{ 'org-token': $store.getters.token }"
                    v-model:file-list="item.imgList"
                    @change="
                      (e) => {
                        handleUploadChange(e, item);
                      }
                    "
                    :multiple="false"
                    name="image"
                    :data="{ dir: 'org_personal' }"
                    accept="image/jpg,image/jpeg,image/gif,image/png"
                    list-type="picture-card"
                  >
                    <div v-if="item.imgList && item.imgList.length == 0">
                      <plus-outlined />
                      <div style="color: #999">上传</div>
                    </div>
                  </a-upload></a-col
                >
                <a-col style="width: 95px; text-align: center">
                  <a-button type="primary" ghost @click="replaceClick(item)"
                    >替换</a-button
                  >
                  <a-col class="text">{{ item.tip }}</a-col>
                </a-col>
              </a-row>
              <!-- 推广区1 -->
              <a-row
                v-if="item.alias == 'PromotionArea1'"
                class="promotionArea"
              >
                <div class="text" style="margin-bottom: 5px">
                  {{ item.tip }}
                </div>
                <a-row align="middle" style="width: 100%" :gutter="[24, 16]">
                  <a-col
                    :span="12"
                    v-for="(image, index) in item.itemList"
                    :key="index"
                  >
                    <div>
                      <a-upload
                        :action="$utils.imgAction"
                        :headers="{ 'org-token': $store.getters.token }"
                        v-model:file-list="image.imgList"
                        @change="
                          (e) => {
                            handleUploadChange(e, image);
                          }
                        "
                        :multiple="false"
                        name="image"
                        :data="{ dir: 'org_personal' }"
                        accept="image/jpg,image/jpeg,image/gif,image/png"
                        list-type="picture-card"
                      >
                        <div v-if="image.imgList && image.imgList.length == 0">
                          <plus-outlined />
                          <div style="color: #999">上传</div>
                        </div>
                      </a-upload>
                    </div>
                    <div>
                      <a-row
                        style="width: 80px"
                        align="middle"
                        justify="space-between"
                      >
                        <a-col style="width: 60px" v-if="!image.isInput">{{
                          image.title
                        }}</a-col>
                        <a-col v-else>
                          <a-input
                            style="width: 80px"
                            v-model:value="image.text"
                            placeholder="请输入"
                          />
                        </a-col>
                        <a-col
                          v-if="!image.isInput"
                          class="modify"
                          @click="promotionModifyClick(image)"
                          ><EditOutlined style="color: #1890ff"
                        /></a-col>
                        <a-col
                          class="modify"
                          v-if="image.isInput"
                          style="width: 100%; text-align: center"
                        >
                          <a-space>
                            <a @click="promotionTextOk(image)">确认</a>
                            <a @click="image.isInput = false">取消</a>
                          </a-space>
                        </a-col>
                      </a-row>
                    </div>
                  </a-col>
                </a-row>
              </a-row>
              <!-- 推广区2 -->
              <a-row align="middle" v-if="item.alias == 'PromotionArea2'">
                <a-form layout="vertical" :colon="false">
                  <a-form-item>
                    <template #label>
                      <span style="font-weight: 700">标题</span>
                    </template>
                    <a-row
                      style="width: 200px"
                      align="middle"
                      justify="space-between"
                    >
                      <a-col style="width: 180px" v-if="!item.isTitleInput">{{
                        item.title
                      }}</a-col>
                      <a-col v-else>
                        <a-input
                          style="width: 130px"
                          v-model:value="item.text"
                          placeholder="请输入"
                        />
                      </a-col>
                      <a-col
                        v-if="!item.isTitleInput"
                        class="modify"
                        @click="modifyClick(item)"
                        ><EditOutlined style="color: #1890ff"
                      /></a-col>
                      <a-col class="modify" v-if="item.isTitleInput">
                        <a-space>
                          <a @click="textOk(item)">确认</a>
                          <a @click="item.isTitleInput = false">取消</a>
                        </a-space>
                      </a-col>
                    </a-row>
                  </a-form-item>
                  <a-form-item>
                    <template #label>
                      <span style="font-weight: 700">内容</span>
                    </template>
                    <a-row
                      style="width: 200px"
                      align="middle"
                      justify="space-between"
                    >
                      <a-col
                        style="width: 180px"
                        v-if="!item.isContentTInput"
                        >{{ item.content }}</a-col
                      >
                      <a-col v-else>
                        <a-input
                          style="width: 130px"
                          v-model:value="item.contentText"
                          placeholder="请输入"
                        />
                      </a-col>
                      <a-col
                        v-if="!item.isContentTInput"
                        class="modify"
                        @click="modifyContentClick(item)"
                        ><EditOutlined style="color: #1890ff"
                      /></a-col>
                      <a-col class="modify" v-if="item.isContentTInput">
                        <a-space>
                          <a @click="contentOk(item)">确认</a>
                          <a @click="item.isContentTInput = false">取消</a>
                        </a-space>
                      </a-col>
                    </a-row>
                  </a-form-item>
                </a-form>
              </a-row>
              <!-- 委托找房 -->
              <a-row v-if="item.alias == 'Entrusted'">
                <a-form layout="vertical" :colon="false">
                  <a-form-item>
                    <template #label>
                      <span style="font-weight: 700">标题</span>
                    </template>
                    <a-row
                      style="width: 200px"
                      align="middle"
                      justify="space-between"
                    >
                      <a-col style="width: 180px" v-if="!item.isTitleInput">{{
                        item.title
                      }}</a-col>
                      <a-col v-else>
                        <a-input
                          style="width: 130px"
                          v-model:value="item.text"
                          placeholder="请输入"
                        />
                      </a-col>
                      <a-col
                        v-if="!item.isTitleInput"
                        class="modify"
                        @click="modifyClick(item)"
                        ><EditOutlined style="color: #1890ff"
                      /></a-col>
                      <a-col class="modify" v-if="item.isTitleInput">
                        <a-space>
                          <a @click="textOk(item)">确认</a>
                          <a @click="item.isTitleInput = false">取消</a>
                        </a-space>
                      </a-col>
                    </a-row>
                  </a-form-item>
                  <a-form-item>
                    <template #label>
                      <span style="font-weight: 700">内容</span>
                    </template>
                    <a-row
                      style="width: 200px"
                      align="middle"
                      justify="space-between"
                    >
                      <a-col
                        style="width: 180px"
                        v-if="!item.isContentTInput"
                        >{{ item.content }}</a-col
                      >
                      <a-col v-else>
                        <a-input
                          style="width: 130px"
                          v-model:value="item.contentText"
                          placeholder="请输入"
                        />
                      </a-col>
                      <a-col
                        v-if="!item.isContentTInput"
                        class="modify"
                        @click="modifyContentClick(item)"
                        ><EditOutlined style="color: #1890ff"
                      /></a-col>
                      <a-col class="modify" v-if="item.isContentTInput">
                        <a-space>
                          <a @click="contentOk(item)">确认</a>
                          <a @click="item.isContentTInput = false">取消</a>
                        </a-space>
                      </a-col>
                    </a-row>
                  </a-form-item>
                </a-form>
              </a-row>
              <!-- 底部栏 -->
              <a-row align="middle" v-if="item.alias == 'Foot'">
                <a-form layout="vertical" :colon="false">
                  <a-form-item>
                    <template #label>
                      <span style="font-weight: 700">文本</span>
                    </template>
                    <a-row
                      style="width: 200px"
                      align="middle"
                      justify="space-between"
                    >
                      <a-col style="width: 180px" v-if="!item.isInput">{{
                        item.title
                      }}</a-col>
                      <a-col v-else>
                        <a-input
                          style="width: 130px"
                          v-model:value="item.text"
                          placeholder="请输入"
                        />
                      </a-col>
                      <a-col
                        v-if="!item.isInput"
                        class="modify"
                        @click="footModifyClick(item)"
                        ><EditOutlined style="color: #1890ff"
                      /></a-col>
                      <a-col class="modify" v-if="item.isInput">
                        <a-space>
                          <a @click="footTextOk(item)">确认</a>
                          <a @click="item.isInput = false">取消</a>
                        </a-space>
                      </a-col>
                    </a-row>
                  </a-form-item>
                </a-form>
              </a-row>
            </a-collapse-panel>
          </a-collapse>
        </div>
        <a-row class="foot">
          <a-button danger ghost @click="resetClick">重置</a-button>
          <a-button type="primary" :loading="loading" @click="applicationClick"
            >应用</a-button
          >
        </a-row>
      </a-col>
      <a-col flex="1">
        <business-home
          v-if="radio == 'pc'"
          :current="collapseList"
        ></business-home>
        <business-mobile v-else :current="collapseList"></business-mobile>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import { PlusOutlined, EditOutlined } from "@ant-design/icons-vue";
import businessHome from "./businessHome.vue";
import businessMobile from "./businessMobile.vue";
import utils from "../../../common/utils/utils";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
import store from "../../../store";
export default defineComponent({
  name: "InvestmentDecoration",
  components: { PlusOutlined, EditOutlined, businessHome, businessMobile },
  setup() {
    const state = reactive({
      radio: "pc",
      radioList: [
        {
          value: "pc",
          name: "PC端",
        },
        {
          value: "mobile",
          name: "移动端",
        },
      ],
      activeKey: [],
      collapseList: [
        {
          name: "主图",
          tip: "建议上传1920*680尺寸",
          image: true,
          imgList: [
            {
              url: utils.staticPath + `images/village/banner.png`,
            },
          ],
          alias: "MainDrawing",
        },
        {
          name: "推广区1",
          alias: "PromotionArea1",
          tip: "建议上传1:1尺寸的图标",
          itemList: [
            {
              title: "真实数据实时更新",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/shuju.png`,
                },
              ],
            },
            {
              title: "直连业主安心透明",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/anxin.png`,
                },
              ],
            },
            {
              title: "便捷灵活快速响应",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/bianjie.png`,
                },
              ],
            },
            {
              title: "无中介0佣金",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/yongjin.png`,
                },
              ],
            },
          ],
        },
        {
          name: "委托找房",
          alias: "Entrusted",
          imgList: [
            {
              url: utils.staticPath + `images/village/find_house.jpg`,
            },
          ],
          title: "免费委托 省心找房",
          content: "快速相应,全程免佣,专业看房顾问带看",
          tip: "建议上传450*300尺寸",
          isInput: false,
        },
        {
          name: "推广区2",
          image: true,
          tip: "建议上传270*270尺寸",
          imgList: [
            {
              url: utils.staticPath + `images/village/bottom_mobile.png`,
            },
          ],
          title: "租赁更放心",
          content: "全方位保障服务",
          isInput: false,
          alias: "PromotionArea2",
        },
        {
          name: "底部栏",
          alias: "Foot",
          title: "All Rights Reserved",
          isInput: false,
        },
      ],
      loading: false,
      listShow: false,
      resetList: [],
    });

    watch(
      () => state.radio,
      (val) => {
        reset.value = false;
        if (val == "mobile") {
          state.activeKey = [];
          state.collapseList = [
            {
              name: "主图",
              tip: "建议上传650*550尺寸",
              image: true,
              imgList: [
                {
                  url: utils.staticPath + `images/village/banner3.png`,
                },
              ],
              alias: "MainDrawingMobile",
            },
          ];
          getHomePgae(1);
        } else {
          state.collapseList = [
            {
              name: "主图",
              tip: "建议上传1920*680尺寸",
              image: true,
              imgList: [
                {
                  url: utils.staticPath + `images/village/banner.png`,
                },
              ],
              alias: "MainDrawing",
            },
            {
              name: "推广区1",
              alias: "PromotionArea1",
              tip: "建议上传1:1尺寸的图标",
              itemList: [
                {
                  title: "真实数据实时更新",
                  isInput: false,
                  imgList: [
                    {
                      url: utils.staticPath + `images/village/shuju.png`,
                    },
                  ],
                },
                {
                  title: "直连业主安心透明",
                  isInput: false,
                  imgList: [
                    {
                      url: utils.staticPath + `images/village/anxin.png`,
                    },
                  ],
                },
                {
                  title: "便捷灵活快速响应",
                  isInput: false,
                  imgList: [
                    {
                      url: utils.staticPath + `images/village/bianjie.png`,
                    },
                  ],
                },
                {
                  title: "无中介0佣金",
                  isInput: false,
                  imgList: [
                    {
                      url: utils.staticPath + `images/village/yongjin.png`,
                    },
                  ],
                },
              ],
            },
            {
              name: "委托找房",
              alias: "Entrusted",
              imgList: [
                {
                  url: utils.staticPath + `images/village/find_house.jpg`,
                },
              ],
              title: "免费委托 省心找房",
              content: "快速相应,全程免佣,专业看房顾问带看",
              tip: "建议上传450*300尺寸",
              isInput: false,
            },
            {
              name: "推广区2",
              image: true,
              tip: "建议上传270*270尺寸",
              imgList: [
                {
                  url: utils.staticPath + `images/village/bottom_mobile.png`,
                },
              ],
              title: "租赁更放心",
              content: "全方位保障服务",
              isInput: false,
              alias: "PromotionArea2",
            },
            {
              name: "底部栏",
              alias: "Foot",
              title: "All Rights Reserved",
              isInput: false,
            },
          ];
          getHomePgae();
        }
      }
    );

    // 上传图片
    const handleUploadChange = (info, item) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList.map((file, index) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
            } else {
              file.status = "error";
              resFileList.splice(index, 1);
            }
          }
        });
      }
    };

    // 替换图片
    const replaceClick = (item) => {
      item.imgList = [];
    };

    // 修改
    const modifyClick = (item) => {
      item.isTitleInput = true;
      item.text = item.title;
    };

    // 输入框确认
    const textOk = (item) => {
      item.title = item.text;
      item.isTitleInput = false;
    };
    // 标题输入框确认
    const modifyContentClick = (item) => {
      item.isContentTInput = true;
      item.contentText = item.content;
    };
    // 内容输入框确认
    const contentOk = (item) => {
      item.content = item.contentText;
      item.isContentTInput = false;
    };
    // 文本输入框确认
    const footModifyClick = (item) => {
      item.text = item.title;
      item.isInput = true;
    };
    const footTextOk = (item) => {
      item.title = item.text;
      item.isInput = false;
    };

    // 推广区1
    const promotionModifyClick = (item) => {
      item.isInput = true;
      item.text = item.title;
    };
    const promotionTextOk = (item) => {
      item.title = item.text;
      item.isInput = false;
    };

    // 应用提交
    const applicationClick = () => {
      reset.value = false;
      state.loading = true;
      let params = {};
      if (state.radio == "mobile") {
        params = { is_mobile: 1 };
      }
      request
        .post("/village", "/clue/home/page", {
          content: state.collapseList,
          ...params,
        })
        .then((res) => {
          message.success("设置成功");
          state.loading = false;
          state.activeKey = [];
          getHomePgae();
        });
    };
    // 获取配置
    const getHomePgae = () => {
      let params = {};

      if (state.radio == "mobile") {
        params = { is_mobile: 1 };
      }
      params.org_id = store.getters.userInfo.org_id;
      request.get("/village", "/clue/home/page", { ...params }).then((res) => {
        state.collapseList =
          Object.keys(res.list).length == 0
            ? state.collapseList
            : res.list.content;
        state.activeKey = [];
        if (reset.value) {
          message.success("重置成功");
        }
      });
    };
    getHomePgae();

    // 重置
    const reset = ref(false);
    const resetClick = () => {
      getHomePgae();
      reset.value = true;
    };
    return {
      ...toRefs(state),
      handleUploadChange,
      replaceClick,
      modifyClick,
      textOk,
      modifyContentClick,
      contentOk,
      footModifyClick,
      footTextOk,
      promotionModifyClick,
      promotionTextOk,
      applicationClick,
      resetClick,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  :deep(.ant-tabs-nav) {
    width: 100%;
  }
  :deep(.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab) {
    width: 49%;
  }
  :deep(.ant-tabs-bar) {
    margin: 0 0 10px 0;
  }
  .content-box {
    width: 100%;
    height: 92%;
    overflow: hidden auto;
    .left {
      padding: 20px;
      width: 285px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .text {
        font-size: 12px;
        color: #aaaaaa;
        padding-top: 5px;
        text-align: center;
        width: 100%;
      }
      .modify {
        cursor: pointer;
      }
      .promotionArea {
        :deep(.ant-upload.ant-upload-select-picture-card) {
          width: 80px;
          height: 80px;
          margin-bottom: 0px;
        }
        :deep(.ant-upload-list-picture-card .ant-upload-list-item) {
          width: 80px;
          height: 80px;
        }
        :deep(.ant-upload-list-picture-card-container) {
          width: 80px;
          height: 73px;
        }
      }
    }
    .foot {
      position: fixed;
      bottom: 25px;
      width: 245px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
